<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <f:view contentType="text/html" >
        <h:head>
            <link rel="stylesheet" type="text/css" href="Resources/main.css" />
        </h:head>

        <h:body class="ui-widget" >
            <h:outputText value="I giocatori sono:" />
            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="100px" style="overflow:hidden !important;">
                    <h:form>
                        <p:menubar>

                            <f:facet name="options">
                                <p:graphicImage value="/Resources/hearts_logo.png" style="height: 30px; position: absolute;margin-left: -36px; left:50%;"/> 
                                <h:outputLabel style="margin-right:10px" value="#{sessionUserBean.userInfo.username}" />
                                <p:commandButton type="submit" value="Exit" icon="ui-icon-triangle-1-w" action="#{tableManagerBean.exitTable}"/>
                                <p:commandButton type="submit" value="Logout" icon="ui-icon-extlink" action="#{authorizationBean.logout}"/> 
                            </f:facet>  
                        </p:menubar>  
                     </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="east" size="22%" styleClass="borderClass">
                    
                    <p:dataTable id="userLogged" value="#{tableBean.viewerInfo}" var="userEntry" emptyMessage="**Watch User**">
                        <f:facet name="header">
                           Viewers
                       </f:facet>

                       <p:column>
                           <h:outputText value="#{userEntry.username}" />
                       </p:column>
                        <p:column>
                            <h:outputText value="#{userEntry.score}" />
                       </p:column>
                    </p:dataTable>
                    
                    <h:form id="form">
                        <p:scrollPanel id="publicScroll" styleClass="ui-corner-all ui-widget-contentl chatscroll">
                            <p:outputPanel id="public" layout="block"/>
                        </p:scrollPanel>
                    
                        <p:inputText value="#{ChatBean.globalMessage}" styleClass="messageInput" />
                            <p:spacer width="2" />
                        <p:commandButton value="Send" styleClass="messageButton" actionListener="#{ChatBean.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
                        
                    </h:form>
                                
                </p:layoutUnit>

                
                <p:layoutUnit position="center" styleClass="borderClass">
                    <p:layout >
                        
                        <p:layoutUnit position="north" size="18%" styleClass="borderClass" >
                            <h:panelGroup layout="block" id="northCard">
                                <h:panelGroup layout="block" style="width:#{13*25+25}px; position:relative; margin-left:auto; margin-right:auto;">
                                    <ui:repeat value="#{tableBean.cardhidden[2]}" var="carta" varStatus="status" rendered="#{tableBean.tableStatus == 1}">
                                        <p:graphicImage id="card" value="/Resources/deck/back-blue-150-1.png" styleClass="cardImage" style="width:50px; position:absolute; z-index: #{status.index}; left: #{status.index*25}px; top:20px;"/>
                                    </ui:repeat>
                                </h:panelGroup>
                                <h:outputText value="#{tableBean.playerInfo[2].username}" styleClass="playerLabel" rendered="#{tableBean.tableStatus == 1}"/>
                            </h:panelGroup>
                        </p:layoutUnit>


                        <p:layoutUnit position="west" size="10%" styleClass="borderClass">
                            <h:panelGroup layout="block" id="westCard">
                                <ui:repeat value="#{tableBean.cardhidden[1]}" var="carta" varStatus="status" rendered="#{tableBean.tableStatus == 1}">
                                    <p:graphicImage styleClass="vertical_cards" id="card" value="/Resources/deck/back-blue-150-1.png" style="right: 30px; width:50px; position:absolute; z-index: #{status.index}; top: #{status.index*13+16}px;"/>
                                </ui:repeat>
                                <h:outputText value="#{tableBean.playerInfo[1].username}" styleClass="playerLabel" rendered="#{tableBean.tableStatus == 1}"/>
                            </h:panelGroup>
                        </p:layoutUnit>

                        <p:layoutUnit position="east" size="10%" styleClass="borderClass">
                            <h:panelGroup layout="block" id="eastCard">
                                <ui:repeat value="#{tableBean.cardhidden[3]}" var="carta" varStatus="status" rendered="#{tableBean.tableStatus == 1}">
                                    <p:graphicImage styleClass="vertical_cards" id="card" value="/Resources/deck/back-blue-150-1.png" style="left: 30px; width:50px; position:absolute; z-index: #{status.index}; top: #{status.index*13+16}px;"/>
                                </ui:repeat>
                                <h:outputText value="#{tableBean.playerInfo[3].username}" styleClass="playerLabel" rendered="#{tableBean.tableStatus == 1}"/>
                            </h:panelGroup>
                        </p:layoutUnit>

                        <p:layoutUnit id="playTable" position="center" styleClass="tableContainer">
                            <h:panelGroup layout="block" style="width:400px; height: 290px; position:relative; margin: -145px auto auto; top:50%;" id="centerCard">
                                 <p:graphicImage value="/Resources/deck/#{tableBean.playedCard[0]}.png" style="left: 160px; width:80px; position:absolute; bottom: 20px;" rendered="#{tableBean.tableStatus == 1}"/>
                                 <p:graphicImage value="/Resources/deck/#{tableBean.playedCard[1]}.png" style="left: 0px; width:80px; position:absolute; top:87px;" rendered="#{tableBean.tableStatus == 1}"/>
                                 <p:graphicImage value="/Resources/deck/#{tableBean.playedCard[2]}.png" style="left: 160px; width:80px; position:absolute; top: 20px;" rendered="#{tableBean.tableStatus == 1}"/>
                                 <p:graphicImage value="/Resources/deck/#{tableBean.playedCard[3]}.png" style="right: 0px; width:80px; position:absolute; top: 87px;" rendered="#{tableBean.tableStatus == 1}"/>
                             </h:panelGroup>
                        </p:layoutUnit>
                        
                        <p:layoutUnit position="south" size="25%" styleClass="borderClass">
                            <h:panelGroup layout="block" id="southCard">
                                <h:panelGroup layout="block" style="width:#{13*40+40}px; position:relative; margin-left:auto; margin-right:auto;">
                                    <ui:repeat id="cardContainer" value="#{tableBean.playerCard}" var="carta" varStatus="status" rendered="#{(tableBean.isPlayer) and (tableBean.tableStatus == 1)}">
                                        <p:graphicImage id="card" value="/Resources/deck/#{carta.name}.png" styleClass="cardImage" style="width:80px; position:absolute; z-index: #{status.index}; left: #{status.index *40}px; top:30px;"/>
                                        <p:draggable for="card" revert="true" />
                                    </ui:repeat>
                                    
                                    <ui:repeat value="#{tableBean.cardhidden[0]}" var="carta" varStatus="status" rendered="#{(!tableBean.isPlayer) and (tableBean.tableStatus == 1)}">
                                        <p:graphicImage id="card" value="/Resources/deck/back-blue-150-1.png" styleClass="cardImage" style="width:80px; position:absolute; z-index: #{status.index}; left: #{status.index*40}px; top:30px;"/>
                                    </ui:repeat>
                                    
                                </h:panelGroup>

                                <h:outputText value="#{tableBean.playerInfo[0].username}" styleClass="playerLabel" rendered="#{tableBean.tableStatus == 1}"/>
                            </h:panelGroup>
                        </p:layoutUnit>

                        <p:droppable for="playTable" tolerance="touch">  
                            <p:ajax listener="#{tableBean.onCardDrop}" update=":centerCard"/>  
                        </p:droppable>
                    </p:layout>
                </p:layoutUnit>
                
            </p:layout>
            
            <p:dialog id="wDialog" widgetVar="waitDialog" position="center" closable="false" draggable="false" resizable="false" modal="false" visible="#{tableBean.tableStatus == 0}" showEffect="fade" hideEffect="fade" style="min-height:130px; min-width:250px"> 
                <h:panelGrid columns="2" cellpadding="5" columnClasses="vtop,vtop">
                    <p:graphicImage id="card" value="/Resources/loading.gif" height="60"/>
                    <h:outputLabel value="Waiting for #{4 - tableBean.numPlayer} player"/>
                </h:panelGrid>
            </p:dialog>
            
            <p:dialog id="rDialog" widgetVar="resultDialog" position="center" closable="false" draggable="false" resizable="false" modal="false" visible="#{tableBean.tableStatus == 2}" rendered="true" showEffect="fade" hideEffect="fade"> 
                <h:form>
                    <p:dataTable value="#{tableBean.playersDeckTaken}" var="player" rendered="#{tableBean.tableStatus == 2}" rowIndexVar="playerIndex" >
                        <p:column>
                            <h:outputLabel value="#{tableBean.playerInfo[playerIndex].username}:" />
                        </p:column>
                        <p:column>
                            <h:panelGroup layout="block" style="position:relative; min-height:70px;">
                                <h:panelGroup layout="block" style="width:#{player.size()*25+25}px; position:relative; margin-left:auto; margin-right:auto;">
                                    <ui:repeat value="#{player}" var="carta" varStatus="status">
                                        <p:graphicImage value="/Resources/deck/#{carta.name}.png" styleClass="cardImage" style="width:50px; position:absolute; left: #{status.index *25}px;"/>
                                    </ui:repeat>
                                </h:panelGroup>
                            </h:panelGroup>
                        </p:column>
                        <p:column>
                            <h:outputLabel style="margin-left:10px" value="#{tableBean.playersPoint[playerIndex]}" />
                        </p:column>
                    </p:dataTable> 
                    <p:commandButton type="submit" value="ExitTable" icon="ui-icon-extlink" action="#{tableManagerBean.exitTable}"/> 
                </h:form>
            </p:dialog>
            
            <p:dialog id="tDialog" widgetVar="terminatedDialog" position="center" closable="false" draggable="false" resizable="false" modal="false" visible="#{tableBean.tableStatus == 3}" rendered="true" showEffect="fade" hideEffect="fade" style="min-height:130px; min-width:250px"> 
                <h:form>
                    <h:outputLabel value="Table terminated"/>
                    <p:commandButton type="submit" value="ExitTable" icon="ui-icon-extlink" action="#{tableManagerBean.exitTable}"/> 
                </h:form>
            </p:dialog>
            
            <p:socket onMessage="handleStatus" channel="/#{tableBean.userSession.userInfo.currentTable.tableKey}">
                <p:ajax update=":userLogged, wDialog, rDialog, tDialog"/>
            </p:socket>
            
            <p:socket channel="/#{tableBean.userSession.userInfo.currentTable.tableKey}/cards">
                <p:ajax update=":northCard, :westCard, :eastCard :centerCard, :southCard"/>
            </p:socket>
            
            <p:socket onMessage="handleMessage" channel="/#{tableBean.userSession.userInfo.currentTable.tableKey}/chat"/>
            
            <script type="text/javascript">
            function handleMessage(data) {
                var chatContent = $(PrimeFaces.escapeClientId('form:public'));
                var chatScroll = $(PrimeFaces.escapeClientId('form:publicScroll'));
                chatContent.append(data + '<br />');
                //keep scroll
                chatScroll.scrollTop(chatContent.height());
            }
            
            function handleStatus(data) {
                if(data == 1)
                {
                    terminatedDialog.hide();
                    resultDialog.hide();
                    waitDialog.hide();
                }
                else if(data == 2)
                {
                    waitDialog.hide();
                    terminatedDialog.hide();
                    resultDialog.show();
                }
                else if(data == 3)
                {
                    resultDialog.hide();
                    waitDialog.hide();
                    terminatedDialog.show();
                }   
            }
            </script>
        </h:body>
    </f:view>
</html>
